<template>
  <div class="container">
    <!-- 标题 -->
    <h3 class="title">{{ photoInfo.title }}</h3>
    <!-- 信息 -->
    <p class="info">
      <span>发布时间: {{ photoInfo.add_time | dateFormat }}</span>
      <span>点击次数: {{ photoInfo.click }}</span>
    </p>
    <hr>
    <!-- 缩略图 -->
    <div class="thumbs">
      <vue-preview :slides="setPreview()" class="preview"></vue-preview>
    </div>
    <!-- 内容 -->
    <div v-html="photoInfo.content"></div>

    <!-- 评论组件 -->
    <comment :newsId="id"></comment>

  </div>
</template>

<script>
/** 引入评论组件 **/
import Comment from "../common/Comment.vue";

export default {
  data(){
    return{
      photoInfo: {}, // 图片信息对象
      thumbImg: [] // 缩略图数组
    }
  },
  created() {
    this.getPhotoInfo();
    this.getThumbImg();
  },
  methods: {
    /** 请求获取图片信息  **/
    async getPhotoInfo(){
      const { data } = await this.$http.get("/api/getimageInfo/" + this.id);
      if( data.status === 0 ) this.photoInfo = data.message[0];
    },
    /** 请求获取缩略图  **/
    async getThumbImg(){
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      if( data.status === 0 ) this.thumbImg = data.message;
    },
    /** 对缩略图参数进行修改 **/
    setPreview() {
      //给预览图设置参数
      this.thumbImg.forEach( img => {
        img.w = 200;//这是大图的宽
        img.h = 200;
        img.msrc = img.src;
      })
      return this.thumbImg;
    }
  },
  props: [
      'id'
  ],
  components: {
    Comment
  }
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 0px 10px;
    .title{
      font-size: 15px;
      text-align: center;
      color: #007aff;
      margin: 10px 0px;
    }
    .info{
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
  }

  /** 缩略图的样式**/
  .thumbs{
    /deep/.my-gallery{  //deep深层作用选择器
      display: flex;
      flex-wrap:wrap; //默认换行
      figure{
        width: 30%;
        margin: 5px;
        img{
          width: 100%;
          box-shadow: 0 0 8px #999; // 盒子的阴影效果
          border-radius: 5px; // 盒子边角
        }
      }
    }
  }
</style>